<template>
    <el-container>
        <el-header class="head">
                <div>
                    <el-input  placeholder="医院名称" >
                    </el-input>
                </div>
                <div>
                    <el-select v-model="value" clearable placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            <el-button @click="findName">搜索</el-button>
        </el-header>
        <el-main>
           <div style="background-color: #42b983 ;height: 380px" >
               <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<!--                   <li v-for="i in count" class="infinite-list-item">{{ i }}</li>-->
                   <li  class="infinite-list-item">
                       <img src="/src/assets/images/logo.png" alt="hospMsg">
                       无极医院
                   </li>
                   <li  class="infinite-list-item">无极医院</li>
                   <li  class="infinite-list-item">无极医院</li>
                   <li  class="infinite-list-item">无极医院</li>
                   <li  class="infinite-list-item">无极医院</li>
                   <li  class="infinite-list-item">无极医院</li>
               </ul>

           </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "FamousHospital",
        data(){
            return {
                options: [{
                    value: '石家庄市',
                    label: '石家庄市'
                }, {
                    value: '唐山市',
                    label: '唐山市'
                }, {
                    value: '秦皇岛市',
                    label: '秦皇岛市'
                }, {
                    value: '邯郸市',
                    label: '邯郸市'
                }, {
                    value: '邢台市',
                    label: '邢台市'
                },{
                    value: '保定市',
                    label: '保定市'
                }, {
                    value: '张家口市',
                    label: '张家口市'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '承德市',
                    label: '承德市'
                }, {
                    value: '沧州市',
                    label: '沧州市'
                }, {
                    value: '廊坊市',
                    label: '廊坊市'
                }, {
                    value: '衡水市',
                    label: '衡水市'
                }],
                count: 0

            }
        },
        methods: {
            findName() {
                this.axios.get('http://localhost:9000/find',{
                    params:{
                        id:1234
                    }
                }).then(back =>{
                    console.log(back.statusText+1234566);
                }).catch(error =>{
                    console.log(error);
                })

            },
            load () {
                this.count += 2
            }
        }
    }
</script>

<style scoped>
    .head{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 40px;
    }
    .head div{
       float: left;
        margin-right: 30px;
    }
    .infinite-list{

    }
    .infinite-list-item{
        background-color: #775637;
        width: 400px;
         ;
        height: 65px;
        border: 1px solid red;
       text-align: center;
    }

</style>